<template>
  <div style="padding: 10px">
    <el-row :gutter="16">
      <el-col :span="4"
        ><el-input placeholder="请输入内容" v-model="input" clearable>
        </el-input>
      </el-col>
      <el-col :span="4"
        ><el-input placeholder="请输入内容" v-model="input" clearable>
        </el-input>
      </el-col>
      <el-col :span="4"
        ><el-input placeholder="请输入内容" v-model="input" clearable>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-select v-model="value" clearable placeholder="状态">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button type="info">查看</el-button>
      </el-col>
    </el-row>
    <ETable :columns="columns" :data="tableData">
      <template slot-scope="scope" slot="action">
        <el-button size="mini" type="primary" @click="handleEdit(scope.row)">
          查看
        </el-button>
      </template>
    </ETable>
    <!-- <DetailModal ref="dialog"></DetailModal> -->
  </div>
</template>

<script>
import ETable from "@/components/ETable.vue";
// import DetailModal from './DetailModal/DetailModal.vue';
export default {
  components: {
    // DetailModal,
    ETable,
  },
  data() {
    return {
      input: "",
      currentPage4: 2,
      value: "",
      columns: [
        { label: "订单号", prop: "date", width: "120" },
        { label: "停车场名称", prop: "name", width: "120" },
        { label: "停车位", prop: "address" },
        { label: "预约人（车牌号）", prop: "address" },
        { label: "共享时间段", prop: "address" },
        { label: "预约时间段", prop: "address" },
        { label: "状态", prop: "address", color: "#f87b34" },
        { label: "停车时长", prop: "address" },
        { label: "费用", prop: "address" },
        {
          label: "操作",
          slot: true,
          prop: "action",
        },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
    };
  },
  methods: {
    handleEdit() {
      //   this.$refs.dialog.open();
      this.$router.push("/");
    },
  },
};
</script>

<style lang="less" scoped>
.btn_text {
  cursor: pointer;
}

.footer_pagin {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}

::v-deep .el-pager .number {
  border: 1px solid #ccc;
}
</style>
